<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改店员信息</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="" lay-filter="example" style="padding-top: 30px;">
    <div class="layui-form-item">
        <input type="hidden" name="id"  class="layui-input" >
        <input type="hidden" name="image" class="image" class="layui-input" >
    </div>
    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-inline">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="telephone" lay-verify="required" autocomplete="off" placeholder="" class="layui-input" maxlength="11">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-inline">
            <label class="layui-form-label">职位</label>
            <div class="layui-input-block">
                <select name="position" lay-filter="zhiwei">
                    <option value=""></option>
                    <option value="销售">销售</option>
                    <option value="收银员">收银员</option>
                    <option value="线上客服">线上客服</option>
                    <option value="销售经理">销售经理</option>
                    <option value="店长">店长</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-inline">
            <label class="layui-form-label">薪资</label>
            <div class="layui-input-block">
                <input type="number" name="salary" lay-verify="required" autocomplete="off" placeholder="" class="layui-input" maxlength="11">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="padding-left: 230px">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传证件照</button>
            <div class="layui-upload-list">
                <div id="layer-photos-demo" class="layer-photos-demo">
                    <img src="" layer-src="" class="layui-upload-img" name="clerkImage" id="demo1" style="width: 200px;height: 150px">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item" style="padding-left: 150px">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="add">修改信息</button>
        </div>
    </div>
</form>

</body>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['upload', 'element', 'layer','form'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , form = layui.form;


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadImage' //改成您自己的上传接口
            ,field:"image"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                    $('#demo1').attr('layer-src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $(".image").val(res.data)
            }
        });



        //监听提交
        form.on('submit(add)', function (data) {
            //获取隐藏域中的图片
            data.field.img=$(".image")[0].value;
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            $.ajax({
                url:"/clerk/update"
                ,data:data.field
                ,type:'post'
                ,success:function(res){
                    console.log(res)
                    if(res.code == 0){

                        layer.msg(res.msg,{icon:1,time:1000},function(){
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            window.parent.location.reload()
                        });

                    }else{
                        layer.msg(res.msg)
                    }
                }
            })
            return false;
        });
    });
    layer.photos({
        photos: '#layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
</script>
</body>
</html>